<template>
  <div class="app-container">

    <el-button type="primary" @click="handleAddRole">新增</el-button>
    <!-- <el-select v-model="searchTd" placeholder="请选择">
    <el-option
      v-for="item in searchType"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select> -->
    <!-- <el-input v-model="searchInput" style="width:150px" placeholder="请输入内容"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
    <el-button type="primary"   @click="chongzhi">重置</el-button> -->
    <div style="height:650px;overflow: auto;">
      <el-table :data="rolesList" v-loading='loading' style="width: 100%;margin-top:30px;" border>
        <el-table-column width="80" label="ID">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.gameName }}
          </template>
        </el-table-column>
        <el-table-column label="特色">
          <template slot-scope="scope">
            {{ scope.row.featuresname}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="是否有安卓">
          <template slot-scope="scope">
            {{ scope.row.haveAndroid?"是":"否"}}
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="是否有IOS">
          <template slot-scope="scope">
            {{ scope.row.haveIos?"是":"否"}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="简介">
          <template slot-scope="scope">
            {{ scope.row.simpleText}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开服时间">
          <template slot-scope="scope">
            {{ scope.row.openAreaTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="排名">
          <template slot-scope="scope">
            {{ scope.row.ranking}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status==1?'测试':'已开服'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总人气">
          <template slot-scope="scope">
            {{ scope.row.totalPopularity}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="版本id">
          <template slot-scope="scope">
            {{ scope.row.versionId}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="版本类别">
          <template slot-scope="scope">
            {{ scope.row.versionname}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="380">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
            <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
            <el-button type="primary" size="mini" @click="boxgametop(scope.row)">轮播图</el-button>
            <el-button type="primary" size="mini" @click="boxgamePropUp(scope.row)">道具上传</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <el-pagination background layout="prev, pager, next,sizes,total" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center; margin-top: 60px;" :page-sizes="[10, 50, 100, 1000]">
    </el-pagination>

    <el-dialog :visible.sync="createDialogVisible" width="21%" @close="handleCancel" :close-on-click-modal="false" title="上传道具素材">
      <el-upload  class="upload-demo" :headers="headers" v-loading="loading1" :on-error="fileError" :on-success="handleAvatarSuccess" :data=dataUp accept=".zip" :limit=1 :before-upload="beforeAvatarUpload" drag :action=uploadPath>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传zip文件，且不超过100mb</div>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script>
import api from '@/api/gameBox'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import JSZip from 'jszip'
export default {
  name: 'gameList',

  data() {
    return {
      uploadPath: uploadPath,
      rolesList: [],
      total: 0,
      limit: 10, // 默认10条
      page: 1, // 当前页码
      loading: false,
      loading1: false,
      createDialogVisible: false,
      dataUp: { dirName: '' },
      shopId: ''
    }
  },
  created() {},
  computed: {
    headers() {
      return {
        'X-Hyxxkj-Admin-Token': getToken()
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    beforeAvatarUpload(file) {
      var isJPG = false
      const _this = this
      if (file.type === 'application/x-zip-compressed') {
        isJPG = true
      }
      const isLt2M = file.size / 1024 / 1024 < 100
      if (!isJPG) {
        this.$message.error('只能上传zip格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传压缩包大小不能超过 100MB!')
        return false
      }
      var iconv = require('iconv-lite')
      var newImg = JSZip.loadAsync(file, {
        decodeFileName: function(bytes) {
          // 解决中文
          return iconv.decode(bytes, 'gbk')
        }
      }).then((zip) => {
        for (const key in zip.files) {
          console.log(this.shopId, key.substring(0, key.indexOf('/')))
          isJPG = false
          break
        }
        return isJPG
        // Object.keys(zip.files).forEach((item) => { //读取文件内容分

        //   zip.files[item].async('blob').then(function(blob) {
        //     _this.readTextAs(blob, 'utf-8', function(error, text) {
        //       console.log(text)
        //     })
        //   })
        // })
      })
      this.dataUp.dirName = 'gm-ybg/' + file.name
      this.loading1 = true
      console.log(isJPG && isLt2M, newImg)
      return false // isJPG && isLt2M
    },
    readTextAs(arrayBuffer, encoding, callback) {
      var reader = new FileReader()
      // EDIT : see my other comment below
      // var blob = JSZip.utils.arrayBuffer2Blob(arrayBuffer);
      var blob = new Blob([arrayBuffer])
      reader.onload = function(evt) {
        callback(null, evt.target.result)
      }
      reader.onerror = function(evt) {
        callback(evt.error, null)
      }
      reader.readAsText(blob, encoding)
    },

    handleAvatarSuccess(res, file) {
      // 上传成功
      if (res.errno == 0) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })

        this.createDialogVisible = false
      } else {
        this.$message.error(res.errmsg)
      }
      this.loading1 = false
      console.log(res, res)
    },
    fileError(err, file, fileList) {
      // 上传出错
      this.$message.error('上传出错')
      console.log(err, err)
      this.loading1 = false
    },
    boxgamePropUp(e) {
      this.createDialogVisible = true
      this.shopId = e.id
    },
    handleCancel() {},
    handleAddRole() {
      this.$router.push({ path: './create' })
    },
    handleEdit(e) {
      this.$router.push({ path: './edit', query: { id: e.id }})
    },
    boxgametop(e) {
      this.$router.push({ path: './banner', query: { id: e.id }})
    },
    handleDelete(e) {
      api.Delete(e).then((res) => {
        if (res.data.errno == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    current_change(e) {
      this.page = e
      this.getList()
    },
    size_change(e) {
      this.limit = e
      this.getList()
    },
    chongzhi() {
      this.getList()
    },
    getList() {
      this.loading = true
      api
        .list({
          limit: this.limit,
          page: this.page
        })
        .then((res) => {
          if (res.data.errno == 0) {
            this.rolesList = res.data.data.list
            this.total = res.data.data.total
            this.limit = res.data.data.limit
            this.page = res.data.data.page
            this.loading = false
          }
        })
        .catch(() => {
          this.Loading = false
        })
    }
  }
}
</script>
